<!DOCTYPE html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title data-i18n="007"></title>
</head>

<body>
    <div data-i18n="007"></div>
    <div id="attr" data-i18n="[myattr]007"></div>
    <button onclick="alertmodal()">弹框弹出</button>
    <button onclick="changelang()">切换</button>
</body>

<script src="./js/jquery.min.js"></script>
<script src="./js/i18next-12.0.0.min.js"></script>
<script src="./js/i18nextLocizeBackend.min.js"></script>
<script src="./js/jquery-i18next.min.js"></script>

<script>
    let lang, i18n;
    function load_i18n(c) {
        let lang_ = localStorage.getItem('lang_')
        init_i18n(lang_, c)
    }

    function init_i18n(lang_, c) {
        let lang
        switch (lang_) {
            case 'zh':
                lang = 'zh'
                break
            case 'en':
                lang = 'en'
                break
            default:
                lang = 'zh'
                break
        }
        i18next.use(i18nextLocizeBackend).init({
            fallbackLng: lang,
            preload: [lang],
            lng: lang,
            backend: {
                loadPath: `./lang/${lang}.json`
            }
        }, function (e, t) {
            console.log(e)
            console.log(t)
            jqueryI18next.init(i18next, $)
            $('[data-i18n]').localize()
            return (typeof c == 'function') && c.call(self, t, i18next)
        })
    }

    load_i18n(function (t, i18next) {
        lang = t
        i18n = i18next
        console.log(lang)
        console.log(i18n)
        console.log(lang('007'))
        console.log(i18n.t('007'))
        console.log(document.getElementById('attr').getAttribute('myattr'))
    })

    function alertmodal() {
        alert(lang('007'))
    }

    function changelang() {
        let lang_ = localStorage.getItem('lang_')
        if (lang_ == 'zh') {
            localStorage.setItem('lang_', 'en')
        } else {
            localStorage.setItem('lang_', 'zh')
        }
        location.reload()
    }
</script>

</html>